<template>
  <div class="ease-sku-table">
    <!-- 批量设置 -->
    <!-- 表格 -->
    <el-table border size="mini" :data="lists" class="tab-con">
      <template v-for="(label, index) in columns">
        <el-table-column v-if="label" :label="label" :key="label.attrId">
          <template slot-scope="scope">
            {{ scope.row.attrValueNames[index] }}
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="stock" label="库存" class="tab-int" key="stock">
        <template slot-scope="scope">
          <el-input-number :min="0" v-model="scope.row.stock" :disabled="scope.row.status === 0" controls-position="right"
            class="tab-int"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="priceFee" label="销售价(元)" class="tab-int" key="priceFee">
        <template slot-scope="scope">
          <el-input-number :min="0.01" :max="1000000000" v-model="scope.row.priceFee" :disabled="scope.row.status === 0"
            controls-position="right" :precision="2" class="tab-int"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="barCode" label="商品条形码" class="tab-int" key="barCode">
        <template slot-scope="scope">
          <el-input :min="0" v-model.number="scope.row.modelId" :disabled="scope.row.status === 0"
            oninput="this.value=this.value.replace(/^\.+|[^\d.]/g,'')" class="tab-int"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="skuCode" label="商品编码" class="tab-int" key="skuCode">
        <template slot-scope="scope">
          <el-input :min="0" v-model.number="scope.row.partyCode" :disabled="scope.row.status === 0"
            oninput="this.value=this.value.replace(/^\.+|[^\d.]/g,'')" class="tab-int"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="skuCode" label="sku状态" v-if="spuId && !isNoSkuValue" key="skuCode">
        <template slot-scope="scope">
          <el-button type="text" @click="skuStatusOperation(scope)">{{ scope.row.status === 1 ? '禁用' : '启用' }}</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>


export default {
  name: 'sku-table',

  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    spuId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      rowspan: [],
      lists: [],
      firstSkuVal: -1,
      secondSkuVal: -1,
      stockIntVal: '', // 库存
      markedPriceIntVal: '',
      priceIntVal: '',
      barCodeIntVal: '', // 条形码
      skuCodeIntVal: '',
    }
  },
  watch: {
    data: {
      handler(val) {
        console.log("data", val)
        this.lists = []
        if (val.length === 0) return
        val.forEach((attrList) => {
          let sku = {
            skuId: this.getUuid(),
            attrValueNames: attrList.map(attr => attr.attrValueName),
            spuSkuAttrValues: attrList,
            stock: 1,
            priceFee: '',
            barCode: '',
            skuCode: '',
            status: 1
          }
          this.lists.push(sku)
        })
      },
      deep: true
    },
    lists: {
      handler(val) {
        console.log("lists", val)
        this.$emit('input', val)
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    columns() {
      if (this.data.length === 0) return []
      return this.data[0].map(attr => attr.attrName)
    },
  },
  methods: {
    getUuid() {
      return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
    },
  }
}
</script>

<style lang="scss">
.ease-sku-table {
  .el-table__row {
    .el-input-number {
      display: block;
      width: 100%;
    }

    .el-input-number.is-controls-right[class*="medium"] [class*="increase"],
    .el-input-number.is-controls-right[class*="medium"] [class*="decrease"] {
      display: none;
      border: 0;
      background: #fff;
    }
  }

  // 批量设置
  .batch-settings {
    margin-bottom: 15px;

    .batch {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .set-now {
        font-size: 14px;
        line-height: 1em;
        padding: 6px 10px;
        color: #02a1e9;
        border: 1px solid #02a1e9;
        cursor: pointer;
      }

      .set.el-button {
        border-color: #02a1e9;
        color: #02a1e9;
      }

      .set.el-button:active {
        background: #ecf5ff;
      }

      .set-tips {
        font-size: 13px;
        color: #999;
        margin-left: 15px;
      }
    }

    .bat-set-item {
      margin-right: 10px;
    }

    .el-input .el-input__inner {
      padding: 0 8px;
    }

    .el-input-number.is-controls-right .el-input__inner {
      text-align: left;
      padding: 0 8px;
    }

    .el-input-number.is-controls-right[class*=mini] [class*=increase],
    .el-input-number.is-controls-right[class*=mini] [class*=decrease] {
      display: none;
    }
  }

  .el-table .cell {
    padding: 0;
    text-align: center;
  }

  .el-table--border th:first-child .cell,
  .el-table--border td:first-child .cell {
    padding-left: 0;
  }

  .el-input-number.is-controls-right .el-input__inner {
    text-align: center;
  }

  .el-table--mini td {
    padding: 0;
  }

  .el-input--medium .el-input__inner {
    width: 100%;
    height: 50px;
    border: 0;
    outline: none;
    padding: 0 10px;
    font-size: 13px;
    text-align: center;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background: transparent;
  }
}
</style>
